<%-- 
    Document   : cargos
    Created on : 01-jun-2012, 9:35:48
    Author     : Administrador
--%>
<%@page import="com.javabeans.Cargo"%>
<%@include file="../../../../controlSession.jsp" %>
<%
    List<Cargo> cargos = (List<Cargo>)request.getAttribute("cargos");
    String msg = "";
    List<Cargo> cargosBaja = (List<Cargo>)request.getAttribute("cargosBaja");
    // preparando para el futuro mensaje
    if(request.getAttribute("msg") != null)
        msg = (String)request.getAttribute("msg");
%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta name="description" content="Derechos Reservados SI-ESFM." />
        <link rel="stylesheet" href="<%=s_path%>/css/styles.css" type="text/css" />
        <link rel="stylesheet" href="<%=s_path%>/css/menu/style.css" type="text/css" />
        <link rel="stylesheet" href="<%=s_path%>/css/themes/start/jquery-ui-1.8.20.custom.css" type="text/css" />
        <link rel="shortcut icon" href="<%=s_path%>/images/ico.png" type="image/png"/>
        
        <script type="text/javascript" src="<%=s_path%>/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/validate/jquery.validate.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.core.min.js"></script>  <!--si o si cargar esto-->
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.widget.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.position.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.mouse.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.button.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.draggable.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.resizable.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.dialog.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.effects.core.min.js"></script>
        
        <script type="text/javascript" src="<%=s_path%>/js/comun.js"></script>
        <script type ="text/javascript">
            $(document).ready(function(){
               $("#dialogo").dialog({
			autoOpen: false,
                        title: "Formulario Cargo",
			height: 250,
			width: 550,
			modal: true,
			buttons: {
                            "Aceptar": function() {
                                var flag = $("#formCargo").valid();
                                if(flag){
                                    $.ajax({
                                        type: 'POST',
                                        url: 'Administracion',
                                        data: $('#formCargo').serialize(),
                                        success: function(res){
                                            //------------  Estoy cambiendo listPais por listCargo---------
                                            $('#listCargo').html(res);
                                        },
                                        error:function(){alert("Error! al registrar el Cargo")}
                                    });
                                    $( this ).dialog( "close" );
                                }
                            },
                            Cancelar: function() {
                                $( this ).dialog( "close" );
                            }
			},
			close: function() {
                            // implementar lo que convenga
			}
		}); 
            });    
            // muestra oculta
            function mostrarOcultar(){
            
                //Cambiando lo que dice paises por cargos
                if(document.getElementById("cargosBaja").style.display == 'none'){
                    document.getElementById("cargosBaja").style.display = 'block';
                    document.getElementById("verOcultar").value = "Ocultar Bajas";
                    document.getElementById("verOcultar").title="Pulsa aqui para ocultar bajas";
                }else{
                    document.getElementById("cargosBaja").style.display = 'none';
                    document.getElementById("verOcultar").value = "Mostrar Bajas"
                    document.getElementById("verOcultar").title="Pulsa aqui para mostrar bajas";
                }
            }
            
            // boton addPais
            // boton addCargo
           $.fn.addCargo = function(){
                $('#formCargo').each(function(){
                    this.reset();
                });
                // en esta parte cambie Nuevo Pais por Nuevo Cargo
                $("#titleForm").text("Nuevo Cargo");
                $("#accion").val("84");
                $( "#dialog:ui-dialog" ).dialog( "destroy" );
                $( "#dialogo" ).dialog( "open" );
                $("#nombre").focus();
           }
            // funcion que modifica un pais
            $.fn.editar = function(idCargo,nombre){
                $('#formAula').each(function(){
                    this.reset();
                });
                $("#titleForm").text("Modificar Cargo");
                $("#accion").val("85");
                $("#idCargo").val(idCargo);
                $("#nombre").val(nombre);

                $( "#dialog:ui-dialog" ).dialog( "destroy" );
                $("#dialogo").dialog("open");
            }

            // baja cargo 
            $.fn.eliminar = function(idCargo,nombre){
                if(confirm("¿Esta seguro de eliminar el cargo ''"+nombre+"''?")){
                    $.ajax({
                        url: "Administracion",
                        type: "GET",
                        data:{ accion:86 , idCargo:idCargo, nombre:nombre },
                        success:function(res){
                            $('#listCargo').html(res);
                        },
                        error: function(res){ alert("Error! al eliminar el cargo."); }
                    });
                }
            }

            // baja cliente corporativo
            $.fn.darBaja = function(idCargo,nombre){
                if(confirm("¿Estas seguro de dar de baja el cargo "+nombre+"?")){
                    $.ajax({
                        url: "Administracion",
                        type: "GET",
                        data:{ accion:87, idCargo:idCargo, nombre:nombre },
                        success:function(res){
                            $('#listCargo').html(res);
                        },
                        error: function(res){ alert("Error! al dar de baja el cargo"); }
                    });
                }
            }

            // alta cliente corporativo
            $.fn.darAlta = function(idCargo,nombre){
                if(confirm("¿Esta seguro de dar de Alta al cargo "+nombre+"?")){
                    $.ajax({
                        url: "Administracion",
                        type: "GET",
                        data:{ accion:88 , idCargo:idCargo, nombre:nombre },
                        success:function(res){
                            $('#listCargo').html(res);
                        },
                        error: function(res){ alert("Error! al dar de alta al cargo."); }
                    });
                }
            }
            
        </script>   
    </head>
    <body onload="showTime(<%=s_param%>)">
        <div id="top-wrap">
            <!-- cabeza principal -->
            <%@include file="../../../../head.jsp" %>
            
            <!-- cuerpo -->
            <div id="bodySpace">               
                <!-- aqui va la ruta -->
                <div class="clearfix" id="middle" style="position: absolute">
                    <!-- aqui va el arbol de entrada -->
                    <div id="breadcrumb"><!-- le da la forma de la imagen -->
                        <ul>
                        <li><a href="<%=s_path%>/principal.jsp">Home</a></li>
                        <li><span style="color:#666">Administraci&oacute;n</span></li>
                        <li><span style="color:#666">Administraci&oacute;n Gral.</span></li>
                        <li class="current-page"><span class="end"><span class="middle">Administraci&oacute;n Cargo</span></span></li>
                        </ul>                       
                    </div><!-- begin SIDEBAR FIRST -->
                </div>
                <div id="principal">
                    <!-- izquierda -->
                    <div class="cuerpo2y" style="border: 0px solid"><br/><br/><!-- estos break son necesarios ya q uso absolute en css  cuerpo izquierdo-->
                        <div class="izq">
                            <%@include file="../../../../bodyIzq.jsp" %>
                        </div>
                        <div class="medio" style="border: 0px solid">
                            <center>
                                
                                <!--Aqui estoy cambiando listPais por listCargo-->
                                
                            <div id="listCargo">
                                
                            <h2 class="decorado">Lista de Cargos Activos</h2>
                            <%=(msg.length()>0)?msg:""%>
                            <table class="miReporte" style="width: 80%">
                                <tr>
                                    <td style="text-align: right"><input type="button" class="boton" value="A&ntilde;adir Nuevo Cargo" onclick="$.fn.addCargo()"/></td>
                                </tr>
                            </table>
                            <table class="tabla_decorado" style="width: 80%">
                                <thead>
                                    <tr><!--  -->
                                        <th width="5%" class="th_decoradoRowspan">Nro</th>
                                        <th width="65%" class="th_decoradoRowspan">NOMBRE</th>
                                        <th width="30%" class="th_decoradoRowspan">ACCIONES</th>
                                    </tr>
                                </thead>
                                <tbody>
                            <%
                                int i = 1;
                                for(Cargo cr : cargos){
                            %>          
                                    <tr class="tr_decorado">
                                        <td class="th_decorado" style="text-align: center"><%=i%></td>
                                        <td class="th_decorado"><%=cr.getNombre()%></td>
                                        <td class="td_decoradoDerecha" style="text-align: center">
                                            <!--AQUI ESTA EL EDITAR   DARBAJA    ELIMINAR-->
                                            <input type="button" value="Editar" onclick="$.fn.editar(<%=cr.getIdCargo()%>,'<%=cr.getNombre()%>')"class="botonRep" title="Pulsa aqui para editar Cargo"/>
                                            <input type="button" value="Dar Baja" onClick="$.fn.darBaja(<%=cr.getIdCargo()%>,'<%=cr.getNombre()%>')" class="botonRep" title="Pulsa aqui para dar de baja el cargo"/>
                                            <input type="button" value="Eliminar" onClick="$.fn.eliminar(<%=cr.getIdCargo()%>,'<%=cr.getNombre()%>')" class="botonRep" title="Pulsa aqui para eliminar el cargo"/>
                                        </td>
                                        <td class="td_decoradoDerecha"></td>
                                    </tr>
                            <%      i++;
                                }
                                if(i == 1){
                                    out.write("<tr class='tr_decorado'>");
                                    out.write("     <td class='td_decorado' colspan='4' style='text-align:center'><p style='color:red'>No existen Cargos registrados!<p></td>");
                                    out.write("</tr>");
                                }
                            %>
                                </tbody>
                            </table>
                                
                            <!-- boton que muestra y oculta los cargos dados de baja --> 
                            
                            <table class="miReporte" style="width: 80%">
                                <tr>
                                    <td style="text-align: right"><input type="button" name="verOcultar" id="verOcultar" value="Mostrar Bajas" onclick="mostrarOcultar()" class="boton" title="Pulsa aqui para mostrar bajas"/></td>
                                </tr>
                            </table>      <br/><br/>
                                
                            <!-- para mostrar bajas -->
                            <div id="cargosBaja" style="display:none;">
                                <center>
                                <h2 class="decorado">Cargos dados de Baja</h2>
                                <table class="tabla_decorado" style="width: 80%">
                                    <thead>
                                        <tr><!--  -->
                                        <th width="5%" class="th_decoradoRowspan">Nro</th>
                                        <th width="65%" class="th_decoradoRowspan">NOMBRE</th>
                                        <th width="30%" class="th_decoradoRowspan">ACCIONES</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                <%
                                    i = 1;
                                    for(Cargo c : cargosBaja){
                                %>          
                                        <tr class="tr_decorado">
                                            <td class="th_decorado" style="text-align: center"><%=i%></td>
                                            <td class="th_decorado"><%=c.getNombre()%></td>
                                           
                                            <td class="td_decoradoDerecha" style="text-align: center">
                                                
                                                <!--Aqui hay otra funcion jQuery dar alta-->
                                                
                                                <input type="button" value="Dar Alta" onClick="$.fn.darAlta(<%=c.getIdCargo()%>,'<%=c.getNombre()%>')" class="botonRep" title="Pulsa aqui para dar de alta al cargo <%=c.getNombre()%>"/>
                                            </td>
                                            <td class="td_decoradoDerecha"></td>
                                        </tr>
                                <%      i++;
                                    }
                                    if(i == 1){
                                        out.write("<tr class='tr_decorado'>");
                                        out.write("     <td class='td_decorado' colspan='4' style='text-align:center'><p style='color:red'>No existen cargos dados de baja!<p></td>");
                                        out.write("</tr>");
                                    }
                                %>
                                    </tbody>
                                </table>
                                </center>
                            </div> <!-- End cargo id='cargoBaja' -->
                            
                            </div> <!-- End id="listCargo" -->
                            <div id="dialogo"><br/>
                                <h2 class="decorado" id="titleForm"></h2><br/>
                                <form id="formCargo" method="POST">
                                    <input type="hidden" name="accion" id="accion" value="0" />
                                    <input type="hidden" name="idCargo" id="idCargo" value="0" />
                                    <div class="error" style="clear:left;text-align:center;"><span></span></div>
                                    <div style="clear:both;">
                                        <label class="form_align35" >Nombre: </label>
                                        <input type="text" name="nombre" id="nombre" value="" class="required form_input_align" title="Ingrese Nombre Cargo" maxlength="40"/>
                                        <label class="error">*</label>
                                    </div>
                                </form>
                            </div><!-- FIN DIV id="dialogo" -->
                                
                            </center>
                        </div>
                    </div><!--end of leftPan-->
                    
                    <div class="yDer" style="border: 1px solid #ccc;">
                        <%@include file="../../../../publicidad.jsp" %>                       
                    </div><!--end of rightPan-->
                </div><!--end of content-wrapper-->
            </div><!--end of body-wrap-->
        </div>
    </body>
</html>
